<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页</title>
     <!--引入2 css-->
         <link rel="stylesheet" href="../themes/default/easyui.css" type="text/css"/>
         <link rel="stylesheet" href="../themes/icon.css" type="text/css"/>
         <!--引入js文件-->
         <script type="text/javascript" src="../js/jquery.min.js"></script>
         <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
</head>
<body>
<!--静态方式创建-->
<div id="pp" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;"></div>

<hr>
<!--javascript 方式创建-->
<!--<div id="paginationID" style="background:#efefef;border:1px solid #ccc;"></div>-->
<div
        id="paginationID"
        style="background:#efefef;border:1px solid #ccc;width:800px">
</div>
<script type="text/javascript">
$("#paginationID").pagination({
    "total":100,
    "pageSize":10,
    "pageNumber":1,
    "pageList":[10,20],
    "layout":['list','sep','first','prev','manual','next','last','links'],
    "onSelectPage":function (pageNumber, b) {
        alert("pagerNumber"+pageNumber);
        alert("pageSize"+b);
    }
});
</script>


</body>
</html>